<template>
    <el-sub-menu :index="data.tree.directoryId" v-if="hasChildren(data.tree)">
        <template #title>
            <el-icon><icon-menu /></el-icon>
            <span>{{ data.tree.directoryName }}</span>
        </template>


        <tree-select-component v-for="child in data.tree.children" :key="child.directoryId"
            :index="data.tree.directoryId + '-' + child.directoryId" :tree="child" @clickMenuItem="clickMenuItem">
            <span style="margin-left: 10px;">{{ child.directoryName }}</span>
        </tree-select-component>



    </el-sub-menu>
    <el-menu-item v-else :index="data.tree.directoryId" @click="clickMenuItem(data.tree)">
        <span style="margin-left: 10px;">{{ data.tree.directoryName }}</span>
    </el-menu-item>
</template>

<script setup>
import { defineEmits } from 'vue';

const data = defineProps({
    tree: Object
})

const emit = defineEmits(["clickMenuItem"])

function hasChildren(value) {
    if (value.children) {
        return true;
    } else {
        return false;
    }
}


function clickMenuItem(value) {
    emit("clickMenuItem", value)
}
</script>

<style></style>